<template>
  <div class="networkConnect">
    <div class="tooltips">
      <span>{{ $t("提示由于诊断分析数据过多系统自动清理7天之前的数据") }}</span>
    </div>
    <div class="chartBox">
      <div class="chartShadow sports" ref="sportsChart">
        <div class="header smallPicker">
          <div class="header-top">
            <div class="title">{{ $t("机器人和运动板") }}</div>
            <div class="selectGroup">
              <el-date-picker
                v-model="sportsTime"
                type="datetimerange"
                size="medium"
                :start-placeholder="$t('开始时间')"
                :end-placeholder="$t('结束时间')"
              >
              </el-date-picker>
            </div>
          </div>
        </div>
        <div class="imgs">
          <img class="chat" src="../../../assets/images/topRight.png" alt="" />
          <img
            @click="fullScreen('sports')"
            class="chat"
            src="../../../assets/images/screen.png"
            alt=""
          />
        </div>
        <lineChart :lineChartAll="lineChartAll"></lineChart>
      </div>
      <div class="chartShadow cloud" ref="cloudChart">
        <div class="header smallPicker">
          <div class="header-top">
            <div class="title">{{ $t("机器人和云台板") }}</div>
            <div class="selectGroup">
              <el-date-picker
                v-model="cloudTime"
                type="datetimerange"
                size="medium"
                :start-placeholder="$t('开始时间')"
                :end-placeholder="$t('结束时间')"
              >
              </el-date-picker>
            </div>
          </div>
        </div>
        <div class="imgs">
          <img class="chat" src="../../../assets/images/topRight.png" alt="" />
          <img
            @click="fullScreen('cloud')"
            class="chat"
            src="../../../assets/images/screen.png"
            alt=""
          />
        </div>
        <lineChart :lineChartAll="lineChartAll"></lineChart>
      </div>
      <div class="chartShadow slam" ref="slamChart">
        <div class="header smallPicker">
          <div class="header-top">
            <div class="title">{{ $t("机器人和slam底盘") }}</div>
            <div class="selectGroup">
              <el-date-picker
                v-model="slamTime"
                type="datetimerange"
                size="medium"
                :start-placeholder="$t('开始时间')"
                :end-placeholder="$t('结束时间')"
              >
              </el-date-picker>
            </div>
          </div>
        </div>
        <div class="imgs">
          <img class="chat" src="../../../assets/images/topRight.png" alt="" />
          <img
            @click="fullScreen('slam')"
            class="chat"
            src="../../../assets/images/screen.png"
            alt=""
          />
        </div>
        <lineChart :lineChartAll="lineChartAll"></lineChart>
      </div>
      <div class="chartShadow light" ref="lineChart">
        <div class="header smallPicker">
          <div class="header-top">
            <div class="title">{{ $t("机器人和可见光相机") }}</div>
            <div class="selectGroup">
              <el-date-picker
                v-model="lightTime"
                type="datetimerange"
                size="medium"
                :start-placeholder="$t('开始时间')"
                :end-placeholder="$t('结束时间')"
              >
              </el-date-picker>
            </div>
          </div>
        </div>
        <div class="imgs">
          <img class="chat" src="../../../assets/images/topRight.png" alt="" />
          <img
            @click="fullScreen('light')"
            class="chat"
            src="../../../assets/images/screen.png"
            alt=""
          />
        </div>
        <lineChart :lineChartAll="lineChartAll"></lineChart>
      </div>
      <div class="chartShadow thermal" ref="thermalChart">
        <div class="header smallPicker">
          <div class="header-top">
            <div class="title">{{ $t("机器人和热像仪") }}</div>
            <div class="selectGroup">
              <el-date-picker
                v-model="thermalTime"
                type="datetimerange"
                size="medium"
                :start-placeholder="$t('开始时间')"
                :end-placeholder="$t('结束时间')"
              >
              </el-date-picker>
            </div>
          </div>
        </div>
        <div class="imgs">
          <img class="chat" src="../../../assets/images/topRight.png" alt="" />
          <img
            @click="fullScreen('thermal')"
            class="chat"
            src="../../../assets/images/screen.png"
            alt=""
          />
        </div>
        <lineChart :lineChartAll="lineChartAll"></lineChart>
      </div>
      <div class="chartShadow lidar" ref="lidarChart">
        <div class="header smallPicker">
          <div class="header-top">
            <div class="title">{{ $t("机器人和激光雷达") }}</div>
            <div class="selectGroup">
              <el-date-picker
                v-model="lidarTime"
                type="datetimerange"
                size="medium"
                :start-placeholder="$t('开始时间')"
                :end-placeholder="$t('结束时间')"
              >
              </el-date-picker>
            </div>
          </div>
        </div>
        <div class="imgs">
          <img class="chat" src="../../../assets/images/topRight.png" alt="" />
          <img
            @click="fullScreen('lidar')"
            class="chat"
            src="../../../assets/images/screen.png"
            alt=""
          />
        </div>
        <lineChart :lineChartAll="lineChartAll"></lineChart>
      </div>
      <div class="chartShad door" ref="doorChart">
        <div class="header-bottom">
          <div class="title">{{ $t("机器人和门") }}</div>
          <div class="selectGroup">
            <el-date-picker
              v-model="doorTime"
              type="datetimerange"
              size="medium"
              :start-placeholder="$t('开始时间')"
              :end-placeholder="$t('结束时间')"
            >
            </el-date-picker>
            <img
              class="chat"
              src="../../../assets/images/topRight.png"
              alt=""
            />
            <img
              @click="fullScreen('door')"
              class="chat"
              src="../../../assets/images/screen.png"
              alt=""
            />
          </div>
        </div>
        <lineChart :lineChartAll="lineChartAll"></lineChart>
      </div>
      <div class="chartShad plc" ref="plcChart">
        <div class="header-bottom">
          <div class="title">{{ $t("机器人和plc设备") }}</div>
          <div class="selectGroup">
            <el-date-picker
              v-model="plcTime"
              type="datetimerange"
              size="medium"
              :start-placeholder="$t('开始时间')"
              :end-placeholder="$t('结束时间')"
            >
            </el-date-picker>
            <img
              class="chat"
              src="../../../assets/images/topRight.png"
              alt=""
            />
            <img
              @click="fullScreen('plc')"
              class="chat"
              src="../../../assets/images/screen.png"
              alt=""
            />
          </div>
        </div>
        <lineChart :lineChartAll="lineChartAll"></lineChart>
      </div>
    </div>
  </div>
</template>
<script>
import lineChart from "./components/lineChart.vue";

export default {
  name: "networkConnect",
  components: {
    lineChart,
  },
  props: {},
  data() {
    return {
      // 折线图数据
      lineChartAll: [
        {
          name: this.$t("CPU使用"),
          type: "line",
          // stack: 'Total',
          data: [20, 23, 25, 21, 29, 33, 21, 38, 20, 23, 25, 21],
        },
        {
          name: this.$t("CPU剩余"),
          type: "line",
          // stack: 'Total',
          data: [35, 23, 24, 25, 37, 15, 37, 23, 35, 23, 24, 25],
        },
      ],
      sportsTime: "",
      cloudTime: "",
      slamTime: "",
      lightTime: "",
      thermalTime: "",
      lidarTime: "",
      doorTime: "",
      plcTime: "",
    };
  },
  computed: {},
  methods: {
    fullScreen(type) {
      if (!screenfull.isEnabled) {
        this.$message({
          message: this.$t("你的浏览器不支持全屏"),
          type: "warning",
        });
        return false;
      }
      switch (type) {
        case "cpu":
          screenfull.toggle(this.$refs.cpuChart);
          break;
        case "gpu":
          screenfull.toggle(this.$refs.gpuChart);
          break;
        case "storage":
          screenfull.toggle(this.$refs.storageChart);
          break;
        case "disk":
          screenfull.toggle(this.$refs.diskChart);
          break;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.networkConnect {
  padding: 0 24px;
}
.chartShadow {
  width: 32.8%;
  height: 382px;
  margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.06);
}
.chartShad {
  width: 49.6%;
  height: 382px;
  margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.06);
}
.sports,
.cloud,
.slam,
.light,
.thermal,
.lidar,
.door,
.plc {
  position: relative;
  .header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 16px 16px;
    z-index: 999;
    .header-top {
      display: flex;
      justify-content: space-between;
      .title {
        font-size: 16px;
        font-weight: bold;
        color: #00d1ff;
        display: flex;
        align-items: center;
      }
    }
  }
  .imgs {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 999;
    .chat {
      display: inline-block;
      width: 20px;
      height: 20px;
      vertical-align: middle;
      margin-left: 10px;
    }
  }
  .header-bottom {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 24px 16px;
    display: flex;
    justify-content: space-between;
    z-index: 999;
    .title {
      font-size: 16px;
      font-weight: bold;
      color: #00d1ff;
      display: flex;
      align-items: center;
    }
    .selectGroup {
      .chat {
        display: inline-block;
        width: 20px;
        height: 20px;
        vertical-align: middle;
        margin-left: 16px;
      }
    }
  }
}
::v-deep {
  input {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    border: none !important;
  }
  .smallPicker {
    .el-date-editor--datetimerange.el-input,
    .el-date-editor--datetimerange.el-input__inner {
      width: 340px !important;
    }
    .el-date-editor .el-range-separator {
      width: 0% !important;
    }
    .el-date-editor .el-range-input {
      width: 60% !important;
    }
  }
}
</style>
